<template>
  <div class="device-alarm">
    <div class="title">• 设备报警情况</div>
    <div class="entrance-chart">
      <vue-seamless-scroll :data="listData"
                           :class-option="optionSingleHeight"
                           class="seamless-warp">
        <div v-for="(item,index) in listData"
             :key="index"
             class="entrance-item">
          <i class="el-icon-warning"></i>
          <div>
            <span v-text="item.title"
                  class="margin-left-10"></span>
            <span v-text="item.name"
                  class="margin-left-20 "></span>
            <span v-text="item.date"
                  class="margin-left-10 float-right"></span>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  data () {
    return {
      listData: [{
        'title': '陌生人闯入报警',
        'name': 'A区B栋一楼门禁',
        'date': '12:45'
      }, {
        'title': '高空抛物报警',
        'name': 'B区宿舍楼外围监控',
        'date': '11:23'
      }, {
        'title': '道闸故障报警',
        'name': 'A区停车场入口',
        'date': '11:02'
      }, {
        'title': '电梯故障报警',
        'name': 'C区A栋客梯',
        'date': '09:21'
      }]
    }
  },
  computed: {
    optionSingleHeight () {
      return {
        singleHeight: 26,
        limitMoveNum: 6
      }
    }
  },
  components: {
    vueSeamlessScroll
  }
}
</script>

<style lang="scss" scoped>
@import "./scss/style.scss";
.device-alarm {
  background-color: rgba(0, 0, 0, 0.801);
  padding: 15px;
  .entrance-chart {
    position: relative;
    width: 100%;
    height: 173px;
    color: #c53334;
    .seamless-warp {
      .entrance-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        font-size: 16px;
        > div {
          flex: 1;
          display: flex;
          justify-content: space-between;
        }
        i {
          font-size: 20px;
          vertical-align: middle;
        }
      }
      height: 169px;
      overflow: hidden;
    }
  }
}
</style>
